////
/// Content
/// Collidable
////

@import 'props';

.Collidable {
  .BlockLayout--typePositioned {
    width: 100%;
    height: collidable(container-height);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: collidable(container-height, tablet);
    }

    @media screen and (min-width: get-breakpoint(desktop)) {
      height: collidable(container-height, desktop);
    }
  }

  .Block--item2,
  .Block--item3,
  .BlockWrapper:nth-child(1),
  .BlockWrapper:nth-child(4) {
    position: absolute;
    width: calc(50% - #{get-border(thin) * 2.5});

    @media screen and (min-width: get-breakpoint(tablet)) {
      width: calc(25% - #{get-border()});
    }
  }

  ///
  /// Obstacles
  .Block--item2,
  .Block--item3 {
    height: collidable(obstacle-height);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: collidable(obstacle-height, tablet);
    }

    @media screen and (min-width: get-breakpoint(desktop)) {
      height: collidable(obstacle-height, desktop);
    }
  }

  .Block--item2 {
    top: collidable(container-padding);
    right: collidable(container-padding);

    @media screen and (min-width: get-breakpoint(tablet)) {
      top: collidable(container-padding, tablet);
      right: auto;
      left: calc(25% + #{collidable(container-padding, tablet)});
    }
  }

  .Block--item3 {
    bottom: collidable(container-padding);
    left: collidable(container-padding);

    @media screen and (min-width: get-breakpoint(tablet)) {
      bottom: collidable(container-padding, tablet);
      right: collidable(container-padding, tablet);
      left: auto;
    }
  }

  ///
  /// Droppables
  .BlockWrapper:nth-child(1),
  .BlockWrapper:nth-child(4) {
    height: collidable(block-height);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: collidable(block-height, tablet);
    }

    @media screen and (min-width: get-breakpoint(desktop)) {
      height: collidable(block-height, desktop);
    }
  }

  .BlockWrapper:nth-child(1) {
    top: collidable(container-padding);
    left: collidable(container-padding);

    @media screen and (min-width: get-breakpoint(tablet)) {
      top: collidable(container-padding, tablet);
      left: collidable(container-padding, tablet);
    }
  }

  .BlockWrapper:nth-child(4) {
    bottom: collidable(container-padding);
    right: collidable(container-padding);

    @media screen and (min-width: get-breakpoint(tablet)) {
      top: collidable(container-padding, tablet);
      right: collidable(container-padding, tablet);
      bottom: auto;
    }
  }

  ///
  /// Walls
  .CollidableWall {
    position: absolute;
    background-color: get-color(coal, dark);
    transition: background-color get-duration() get-easing();
  }

  .CollidableWall--itemTop {
    top: 0;
    right: 0;
    left: 0;
    height: get-border(thin);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: get-border();
    }
  }

  .CollidableWall--itemRight {
    top: 0;
    right: 0;
    bottom: 0;
    width: get-border(thin);

    @media screen and (min-width: get-breakpoint(tablet)) {
      width: get-border();
    }
  }

  .CollidableWall--itemBottom {
    right: 0;
    bottom: 0;
    left: 0;
    height: get-border(thin);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: get-border();
    }
  }

  .CollidableWall--itemLeft {
    top: 0;
    bottom: 0;
    left: 0;
    width: get-border(thin);

    @media screen and (min-width: get-breakpoint(tablet)) {
      width: get-border();
    }
  }

  // Draggable
  .draggable-mirror {
    .BlockContent {
      transform: scale(0.9);
    }
  }

  .draggable-container--is-dragging:not(.draggable-container--over) {
    .Block--typeStripes {
      .BlockContent {
        color: get-color(brand, red);
      }
    }

    .CollidableWall {
      background-color: get-color(brand, red);
    }
  }

  // stylelint-disable-next-line no-duplicate-selectors
  .CollidableWall {
    &.isColliding {
      background-color: get-color(brand, red);
    }
  }
}
